<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Cart</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>

    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //为所有的-按钮绑定单击事件
            $('.minus').each(function () {
                $(this).on('click',function () {
                    var quantity = this.nextSibling;

                    var listPrice = this.parentNode.nextSibling.nextSibling;
                    var totalPrice = listPrice.nextSibling.nextSibling;

                    var itemRow = this.parentNode.parentNode;
                    var itemId = $(itemRow).attr('id');

                    console.log(itemId);

                    if(quantity.value > 1) {
                        //修改商品数量和总价
                        quantity.value--;
                        totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * quantity.value).toFixed(2);
                        //发送ajax请求
                        $.get('/cart/ajaxUpdateItem','itemId=' + itemId + '&quantity=' + quantity.value,function (data){});
                    }
                    else if(quantity.value == 1){
                        //移除商品
                        $(itemRow).remove();
                        var tableHeader = $('#tableHeader');
                        var cartTable = tableHeader.parent();
                        if(cartTable.find('tr').length == 2){
                            console.log(123);
                            tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
                        }
                        //发送ajax请求
                        $.get('/cart/ajaxRemoveItem','itemId=' + itemId,function (data){});
                    }
                });
            });

            //为所有的+按钮绑定单击事件
            $('.add').each(function (){
                $(this).on('click',function () {
                    var quantity = this.previousSibling;
                    var listPrice = this.parentNode.nextSibling.nextSibling;
                    var totalPrice = listPrice.nextSibling.nextSibling;
                    var itemRow = this.parentNode.parentNode;
                    var itemId = $(itemRow).attr('id');

                    console.log(itemId);

                    //修改商品数量和总价
                    quantity.value++;
                    totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * quantity.value).toFixed(2);

                    //发送ajax请求
                    $.get('/cart/ajaxUpdateItem','itemId=' + itemId + '&quantity=' + quantity.value,function (data){});
                });
            });

            //为所有的remove按钮绑定单击事件
            $('.remove').each(function () {
                $(this).on('click',function () {
                    var itemRow = this.parentNode.parentNode;
                    var itemId = $(itemRow).attr('id');

                    console.log(itemId);

                    //移除商品
                    $(itemRow).remove();
                    var tableHeader = $('#tableHeader');
                    var cartTable = tableHeader.parent();
                    if(cartTable.find('tr').length == 2){
                        tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
                    }
                    //发送ajax请求
                    $.get('/cart/ajaxRemoveItem','itemId=' + itemId,function (data){});
                });
            });

            //为所有的quantity文本框绑定失去焦点事件
            $('.quantity').each(function () {
                $(this).on('blur',function () {
                    var listPrice = this.parentNode.nextSibling.nextSibling;
                    var totalPrice = listPrice.nextSibling.nextSibling;
                    var itemRow = this.parentNode.parentNode;
                    var itemId = $(itemRow).attr('id');

                    console.log(itemId);

                    if(this.value > 0) {
                        //修改总价
                        totalPrice.firstChild.textContent = '$' + ($(listPrice).attr('id') * this.value).toFixed(2);
                        //发送ajax请求
                        $.get('/cart/ajaxUpdateItem','itemId=' + itemId + '&quantity=' + this.value,function (data){});
                    }
                    else{
                        //移除商品
                        $(itemRow).remove();
                        //移除商品
                        $(itemRow).remove();
                        var tableHeader = $('#tableHeader');
                        var cartTable = tableHeader.parent();
                        if(cartTable.find('tr').length == 2){
                            tableHeader.after("<tr><td colspan='8'><b>Your cart is empty.</b></td></tr>");
                        }
                        //发送ajax请求
                        $.get('/cart/ajaxRemoveItem','itemId=' + itemId,function (data){});
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div th:replace="common/Top"></div>

    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/view">Return to Main Menu</a>
        </div>

        <div id="Catalog">

            <div id="Cart">

                <h2>Shopping Cart</h2>


                <form name="cart" action="" method="post">
                    <table id="cartTable">
                        <tr id="tableHeader">
                            <th><b>Item ID</b></th>
                            <th><b>Product ID</b></th>
                            <th><b>Description</b></th>
                            <th><b>In Stock?</b></th>
                            <th><b>Quantity</b></th>
                            <th><b>List Price</b></th>
                            <th><b>Total Cost</b></th>
                            <th>&nbsp;</th>
                        </tr>

                        <tr th:if="${session.cart.numberOfItems} == 0">
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>

                        <tr th:each="cartItem:${session.cart.cartItems}" th:id="${cartItem.itemId}">
                            <td>
                                <a th:href="@{/catalog/viewItem?itemId={itemId}(itemId=${cartItem.itemId})}" th:text="${cartItem.itemId}"></a>
                            </td>
                            <td th:text="${cartItem.productId}"></td>
                            <td th:text="${cartItem.descn}"></td>
                            <td th:text="${cartItem.inStock}"></td>
                            <td style="width: 120px">
                                <input type="button" class="minus" value="-" style="width: 24px"><input type="text" class="quantity" th:name="${cartItem.quantity}" th:value="${cartItem.quantity}" style="width: 64px;text-align: center" oninput="value=value.replace(/[^\d]/g,'')"/><input type="button" class="add" value="+" style="width: 24px">
                            </td>
                            <td th:id="${cartItem.listPrice}" th:text="'$'+${#numbers.formatDecimal(cartItem.listPrice,0,'COMMA',2,'POINT')}"></td>
                            <td th:text="'$'+${#numbers.formatDecimal(cartItem.totalPrice,0,'COMMA',2,'POINT')}"></td>
                            <td>
                                <input type="button" class="remove" value="Remove">
                            </td>
                        </tr>

                        <tr>
                            <td colspan="7">
                                <input type="button" value="updateCart">
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>

                    <a th:if="${session.cart.numberOfItems > 0}" href="/cart/checkOut" class="Button">
                        Proceed to Checkout
                    </a>
                </form>
            </div>

            <div id="Separator">&nbsp;</div>
        </div>
    </div>

    <div th:replace="common/Bottom"></div>
</body>
</html>